<template>
  <div class="forget-container">
    <!-- 添加返回按钮 -->
    <van-nav-bar 
      title="重置密码" 
      left-arrow 
      @click-left="goBack"
    />
    <div class="form-wrapper">
      <!-- 成功提示 -->
      <div v-if="showSuccess" class="message-success">
        <van-icon name="success" class="success-icon" />
        <span>密码重置成功！正在跳转到登录页面...</span>
      </div>
      
      <!-- 错误提示 -->
      <div v-if="formError" class="form-error">
        <van-icon name="warning" class="error-icon" />
        <span>{{ formError }}</span>
      </div>
      
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入需要重置的用户名"
        clearable
      />
      <van-field
        v-model="newPassword"
        label="新密码"
        type="password"
        placeholder="请输入新密码"
        clearable
        :rules="[{ required: true, message: '密码长度至少6位' }, { min: 6 }]"
      />
      <van-button 
        type="primary" 
        block 
        class="submit-btn"
        @click="handleReset"
        :disabled="!username || !newPassword"
        :loading="loading"
      >
        确认重置
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { directResetPwd } from '@/api/index.js';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const username = ref(''); // 用户名
const newPassword = ref(''); // 新密码
const userStore = useUserStore();

// 新增：提示状态和加载状态
const showSuccess = ref(false);
const formError = ref('');
const loading = ref(false);

// 返回登录页面
const goBack = () => {
  router.push('/login');
};

// 提交重置
const handleReset = async () => {
  // 清空之前的提示
  showSuccess.value = false;
  formError.value = '';
  loading.value = true;
  
  try {
    await directResetPwd(username.value, newPassword.value);
    
    // 显示成功提示
    showSuccess.value = true;
    
    // 调用登出方法
    userStore.logout();
    
    // 延迟跳转到登录页
    setTimeout(() => {
      router.push('/login');
    }, 2000);
    
  } catch (error) {
    console.error('重置密码失败:', error);
    formError.value = error.response?.data?.message || '重置失败，请重试';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.forget-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 0; /* 移除内边距，因为导航栏会占据顶部 */
}

.form-wrapper {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 16px; /* 添加上下边距 */
}

.submit-btn {
  margin-top: 30px;
  background-color: #ff9a00;
  border: none;
}

/* 错误提示样式 */
.form-error {
  display: flex;
  align-items: center;
  color: #f53f3f;
  font-size: 14px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #fff2f0;
  border-radius: 6px;
  border-left: 3px solid #f53f3f;
  
  .error-icon {
    margin-right: 8px;
    font-size: 16px;
  }
}

/* 成功提示样式 */
.message-success {
  display: flex;
  align-items: center;
  color: #07c160;
  font-size: 14px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #f0fff8;
  border-radius: 6px;
  border-left: 3px solid #07c160;
  
  .success-icon {
    margin-right: 8px;
    font-size: 16px;
  }
}
</style>